/*
 * @Author: zhangyujie
 * @Date:   2015-08-12 10:42:41
 * @Last Modified by:   zhangyujie
 * @Last Modified time: 2015-08-14 09:55:06
 */

define(['jquery', 'd3', 'util','hammer'], function($, d3, util,Hammer) {
    function radar(data) {

        var setting = {
            selector: '#two_2',
            colorset: ['#ffc75a', '#eeeeee'],
            series: [{
                nameStyle: {
                    'font-size': '14px',
                    'text-anchor': 'middle'
                },
                valueStyle: {
                    'font-size': '28px',
                    'fill': '#7ea5d6',
                    'fill-opacity': '0.95'
                },
                tickStyle: {
                    'font-size': '12px',
                    'text-anchor': 'left'

                },
                circleLineStyle: {
                    'fill': '#eeeeee'
                },
                tickLineStyle: {
                    'fill': 'none',
                    'stroke': '#ccc',
                },
                circleStyle: {
                    colorset: ['#f4f4f4', '#d4d4d4', '#717d91', '#fff']
                },
                vertexStyle: {
                    'stroke-width': '2px',
                    'stroke': '#255aa5',
                    'fill': '#fff',
                    'cursor': 'pointer'
                },
                data:data
                //data: [{
                //    'name': '1',
                //    'value': 30
                //}, {
                //    'name': '2',
                //    'value': 10
                //}, {
                //    'name': '3',
                //    'value': 65
                //}, {
                //    'name': '4',
                //    'value': 50
                //}, {
                //    'name': '5',
                //    'value': 40
                //}, {
                //    'name': '6',
                //    'value': 43
                //}, {
                //    'name': '7',
                //    'value': 90
                //}, {
                //    'name': '8',
                //    'value': 56
                //}, {
                //    'name': '9',
                //    'value': 50
                //}, {
                //    'name': '10',
                //    'value': 35
                //}]
            }],
            radius: ['40%', '15%'],
            center: ['50%', '50%'],
            nodeMouseover: function(d, i, that) {


                var position = d3.mouse(document.body)


                d3.select('.tooltip')
                    .classed('hidden', false)
                    .style('left', position[0] + 'px')
                    .style('top', position[1] + 'px')
                    .select('.value')
                    .text(d.value)
                that.classed('selected', true)
            },
            nodeMouseout: function(d, i, that) {
                d3.select('.tooltip')
                    .classed('hidden', true)

                that.classed('selected', false)
            }

        }

        //var d = new Date()
        //var year = d.getFullYear()
        //
        //$(".two_year").html(year)
        //
        //$(".two_pref").click(function() {
        //    year = year - 1
        //    $(".two_year").html(year)
        //    changeYear(year)
        //})
        //
        //$(".two_next").click(function() {
        //    year = year + 1
        //    $(".two_year").html(year)
        //    changeYear(year)
        //})
        //
        //function changeYear(year) {
        //    two_2(setting)
        //}




        two_2(setting)

        function two_2(setting) {
            document.querySelector(setting.selector).innerHTML = ''

            var width, height, selector, radius, colorset, center, innerR,
                outerR, series, centerX, centerY, startA, endA,
                dom, position, arc, pie, translate, endAngle,
                name, value, circles, i, cr, serie, data,
                rotate, radial, rScale,
                min, max, text

            var svg, content, left, right, ticks

            var leftStartA = -Math.PI,
                rightStartA = 0,
                leftEndA = 0,
                rightEndA = 2 * Math.PI

            selector = setting.selector
            dom = document.querySelector(selector)
            position = dom.getBoundingClientRect()
            width = position.width
            height = position.height
            radius = setting.radius
            center = setting.center
            colorset = setting.colorset
            outerR = util.util.getNumByRate(width, radius[0])
            innerR = util.util.getNumByRate(width, radius[1])
            centerX = util.util.getNumByRate(width, center[0])
            centerY = util.util.getNumByRate(height, center[1])
            translate = centerX + ',' + centerY
            startA = 0
            endA = 2 * Math.PI
            series = setting.series
            serie = series[0]
            data = serie.data

            min = d3.min(data, function(d, i) {

                return d['value']
            })
            max = d3.max(data, function(d, i) {

                return d['value']
            })

            circles = []

            radial = d3.svg.line.radial()
                .radius(function(d) {

                    return rScale(d.value)

                }).angle(function(d, i) {

                    rotate = i * 2 * Math.PI / (data.length)

                    return rotate
                })
            rScale = d3.scale.linear()
                .domain([min, max])
                .range([innerR, outerR])
            svg = d3.select(selector)
                .append('svg')
                .attr('width', width)
                .attr('height', height)


            content = svg.append('g')
                .attr('transform', 'translate(' + translate + ')')



            for (i = 0; i < 4; i++) {

                cr = outerR - (i * (outerR - innerR) / 3) + 5
                circles.push({
                    color: serie.circleStyle.colorset[i],
                    r: cr
                })



            }


            //中间的4个月
            content.append('g').selectAll('.bigCircle')
                .data(circles)
                .enter()
                .append('circle')
                .attr('r', function(d, i) {

                    return d.r
                })
                .attr('fill', function(d, i) {

                    return d.color
                })


            //刻度直线
            content.append('g')
                .selectAll('.nameLine')
                .data(data)
                .enter()
                .append('line')
                .attr('x1', 0)
                .attr('y1', 0)
                .attr('x2', 0)
                .attr('y2', -outerR * 1.05)
                .style(serie.tickLineStyle)
                .attr('transform', function(d, i) {

                    rotate = i * 360 / (data.length)

                    return 'rotate(' + rotate + ', 0, 0)'
                })
                //刻度文本
            content.append('g')
                .selectAll('.nameText')
                .data(data)
                .enter()
                .append('text')
                .text(function(d, i) {

                    return d.name
                })
                .style(serie.nameStyle)
                .attr('y', function(d, i) {

                    return -outerR * 1.07
                })
                .attr('transform', function(d, i) {

                    rotate = i * 360 / (data.length)

                    return 'rotate(' + rotate + ', 0, 0)'
                })

            //数值线
            content.append('g')
                .append('path')
                .attr('d', radial(data))
                .style(serie.valueStyle)
                
            //数值刻度
            ticks = content.append('g')

            for (i = 0; i < 4; i++) {

                text = (max - (i * (max - min) / 3))

                cr = outerR - (i * (outerR - innerR) / 3)


                ticks.append('text')
                    .attr('x', 0)
                    .attr('y', -cr)
                    .style(serie.tickStyle)
                    .text(text.toFixed(0))
                    .attr('dy', '1.1em')


            }


            //数值顶点
            content.append('g')
                .selectAll('.vertex')
                .data(data)
                .enter()
                .append('circle')
                .attr('r', '7')
                .style(serie.vertexStyle)
                .attr('class', 'vertex')
                .attr('cy', function(d, i) {

                    return -rScale(d.value)
                })
                .attr('transform', function(d, i) {

                    rotate = i * 360 / (data.length)

                    return 'rotate(' + rotate + ', 0, 0)'
                })
                .on('touchstart', function(d, i) {

                    setting.nodeMouseover && setting.nodeMouseover(d, i, d3.select(this))
                })
                .on('touchend', function(d, i) {

                    setting.nodeMouseout && setting.nodeMouseout(d, i, d3.select(this))
                })
                .on('mouseover', function(d, i) {

                    setting.nodeMouseover && setting.nodeMouseover(d, i, d3.select(this))
                })
                .on('mouseout', function(d, i) {

                    setting.nodeMouseout && setting.nodeMouseout(d, i, d3.select(this))
                })

            content.append('g')
                .selectAll('.vertex1')
                .data(data)
                .enter()
                .append('circle')
                .attr('r', '15')
                .style("fill", "none")
                .attr('class', 'vertex1')
                .attr('cy', function(d, i) {

                    return -rScale(d.value)
                })
                .attr('transform', function(d, i) {

                    rotate = i * 360 / (data.length)

                    return 'rotate(' + rotate + ', 0, 0)'
                })
                .on('touchstart', function(d, i) {

                    setting.nodeMouseover && setting.nodeMouseover(d, i, d3.select(this))
                })
                .on('touchend', function(d, i) {

                    setting.nodeMouseout && setting.nodeMouseout(d, i, d3.select(this))
                })
                .on('mouseover', function(d, i) {

                    setting.nodeMouseover && setting.nodeMouseover(d, i, d3.select(this))
                })
                .on('mouseout', function(d, i) {

                    setting.nodeMouseout && setting.nodeMouseout(d, i, d3.select(this))
                })


            content.append("image")
                .attr("x", -35)
                .attr("y", -35)
                .attr("width", 70)
                .attr("height", 70)
                .attr("xlink:href", "/resources/app/images/chart/chart_head.png");

        }
    }

    return {
        radar: radar
    }
})
